<template>
  <div class="releaseTK" v-if="loading">
    <div class="teachReport_search clear">
      <div>
        教学报告<span style="color: red">* </span>
        <el-input
          class="teachReport_sr"
          placeholder="请输入15字内的报告名称"
          v-model="reportName"
        >
        </el-input>
      </div>
      <div class="srm">
        <span class="span_text">学年学期：</span>
        <el-select
          v-model="searchParams.termValue"
          clearable
          placeholder="请选择学年学期"
          style="width: 150px"
          @change="handleChange('term')"
        >
          <el-option
            v-for="item in termOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="srm">
        <span class="span_text">教学周：</span>
        <el-select
          v-model="searchParams.weeksValue"
          clearable
          placeholder="请选择教学周"
          style="width: 150px"
          @change="handleChange('weeks')"
        >
          <el-option
            v-for="item in weeksOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="srm">
        <span class="span_text">班级：</span>
        <el-select
          @change="handleSearch(false)"
          v-model="searchParams.classValue"
          clearable
          placeholder="请选择班级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-button
        v-show="false"
        @click="handleSearch(false)"
        type="primary"
        size="small"
        style="margin-left: 15px"
      >
        查询
      </el-button>
    </div>
    <!--  -->
    <div class="classSchedule_batle">
      <div class="table_heard">
        <span style="line-height: 50px; font-size: 14px"
          >选择课程节次<span style="color: red">* </span
          ><span style="color: #888888; font-size: 12px"
            >（最多可选5节）</span
          ></span
        >
        <div>
          <div>
            <div class="color_box" style="background-color: #348efc"></div>
            已选
          </div>
          <div>
            <div class="color_box" style="background-color: #000000"></div>
            可选
          </div>
          <div>
            <div class="color_box" style="background-color: #999999"></div>
            无录制视频
          </div>
        </div>
      </div>
      <!-- v-if="loading" -->
      <div class="time_table">
        <el-table
          class="video_table"
          :data="listData"
          border
          max-height="600"
          style="width: 100%"
        >
          <el-table-column
            prop="section"
            label="节次"
            min-width="130"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div class="class_section">
                <div>{{ scope.row.section_name }}</div>
                <span>{{ scope.row.section_time }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="monday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[0].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周一
              <div>
                {{ formatTime(tableHeaderData.week_data[0].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.monday"
                @click="selectSubject(scope.row.monday)"
              >
                <div class="tag_check" v-if="scope.row.monday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="!scope.row.monday.isCheck && scope.row.monday.course_id"
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="scope.row.monday.course_id ? 'cursorp' : 'nonecursor'"
                  :style="{ color: coclorBG(scope.row.monday) }"
                >
                  <div>{{ scope.row.monday.subject_name }}</div>
                  <div>{{ scope.row.monday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="tuesday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[1].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周二
              <div>
                {{ formatTime(tableHeaderData.week_data[1].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.tuesday"
                @click="selectSubject(scope.row.tuesday)"
              >
                <div class="tag_check" v-if="scope.row.tuesday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="
                    !scope.row.tuesday.isCheck && scope.row.tuesday.course_id
                  "
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="
                    scope.row.tuesday.course_id ? 'cursorp' : 'nonecursor'
                  "
                  :style="{ color: coclorBG(scope.row.tuesday) }"
                >
                  <div>{{ scope.row.tuesday.subject_name }}</div>
                  <div>{{ scope.row.tuesday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="wednesday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[2].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周三
              <div>
                {{ formatTime(tableHeaderData.week_data[2].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.wednesday"
                @click="selectSubject(scope.row.wednesday)"
              >
                <div class="tag_check" v-if="scope.row.wednesday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="
                    !scope.row.wednesday.isCheck &&
                    scope.row.wednesday.course_id
                  "
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="
                    scope.row.wednesday.course_id ? 'cursorp' : 'nonecursor'
                  "
                  :style="{ color: coclorBG(scope.row.wednesday) }"
                >
                  <div>{{ scope.row.wednesday.subject_name }}</div>
                  <div>{{ scope.row.wednesday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="thursday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[3].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周四
              <div>
                {{ formatTime(tableHeaderData.week_data[3].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.thursday"
                @click="selectSubject(scope.row.thursday)"
              >
                <div class="tag_check" v-if="scope.row.thursday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="
                    !scope.row.thursday.isCheck && scope.row.thursday.course_id
                  "
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="
                    scope.row.thursday.course_id ? 'cursorp' : 'nonecursor'
                  "
                  :style="{ color: coclorBG(scope.row.thursday) }"
                >
                  <div>{{ scope.row.thursday.subject_name }}</div>
                  <div>{{ scope.row.thursday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="friday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[4].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周五
              <div>
                {{ formatTime(tableHeaderData.week_data[4].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.friday"
                @click="selectSubject(scope.row.friday)"
              >
                <div class="tag_check" v-if="scope.row.friday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="!scope.row.friday.isCheck && scope.row.friday.course_id"
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="scope.row.friday.course_id ? 'cursorp' : 'nonecursor'"
                  :style="{ color: coclorBG(scope.row.friday) }"
                >
                  <div>{{ scope.row.friday.subject_name }}</div>
                  <div>{{ scope.row.friday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="saturday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[5].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周六
              <div>
                {{ formatTime(tableHeaderData.week_data[5].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.saturday"
                @click="selectSubject(scope.row.saturday)"
              >
                <div class="tag_check" v-if="scope.row.saturday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="
                    !scope.row.saturday.isCheck && scope.row.saturday.course_id
                  "
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="
                    scope.row.saturday.course_id ? 'cursorp' : 'nonecursor'
                  "
                  :style="{ color: coclorBG(scope.row.saturday) }"
                >
                  <div>{{ scope.row.saturday.subject_name }}</div>
                  <div>{{ scope.row.saturday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="sunday"
            min-width="130"
            align="center"
            show-overflow-tooltip
            :class-name="
              !tableHeaderData.week_data[6].date ? 'disable_col' : ''
            "
          >
            <template #header>
              周日
              <div>
                {{ formatTime(tableHeaderData.week_data[6].date) }}
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="class_course"
                v-if="scope.row.sunday"
                @click="selectSubject(scope.row.sunday)"
              >
                <div class="tag_check" v-if="scope.row.sunday.isCheck">
                  <img src="../../../assets/images/xuanzhong.png" />
                </div>
                <div
                  v-if="!scope.row.sunday.isCheck && scope.row.sunday.course_id"
                  class="tag_check2"
                ></div>
                <div
                  class="section_info"
                  :class="scope.row.sunday.course_id ? 'cursorp' : 'nonecursor'"
                  :style="{ color: coclorBG(scope.row.sunday) }"
                >
                  <div>{{ scope.row.sunday.subject_name }}</div>
                  <div>{{ scope.row.sunday.class_name }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="text-align: center; margin-top: 20px">
      <el-button class="srm" @click="cancelAI">取消</el-button>
      <el-button type="primary" class="srm" @click="generateAI">确定</el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/tools/tool.js";
// 枚举星期
const enumDateWeek = {
  1: "周一",
  2: "周二",
  3: "周三",
  4: "周四",
  5: "周五",
  6: "周六",
  7: "周日",
};
const mockData = {
  term: {},
  week: {},
  week_data: [{}, {}, {}, {}, {}, {}, {}],
};

// 根据number枚举日期
const enmuDateText = {
  1: "monday",
  2: "tuesday",
  3: "wednesday",
  4: "thursday",
  5: "friday",
  6: "saturday",
  7: "sunday",
};
export default {
  props: {
    dialogStatus: Boolean,
  },
  computed: {
    // 格式化整理时间日期
    formatTime() {
      return (day) => {
        if (day) {
          const match = day.match(/\-/); // 匹配第一个点
          if (match) {
            // 截取字符串
            const dayText = day.substring(match.index + 1);
            return `(${dayText})`;
          }
        } else {
          return "";
        }
      };
    },
    // 转节次为中文
    numberToText() {
      return (num) => {
        const numberMap = {
          0: "零",
          1: "一",
          2: "二",
          3: "三",
          4: "四",
          5: "五",
          6: "六",
          7: "七",
          8: "八",
          9: "九",
        };

        const unitMap = {
          1: "", // 十的话特殊处理
          2: "十",
          3: "百",
          4: "千",
        };

        const numStr = num.toString();
        let text = "";

        for (let i = 0; i < numStr.length; i++) {
          const digit = parseInt(numStr[i]);
          const unit = numStr.length - i; // 计算位数

          if (digit !== 0) {
            if (unit === 2 && digit === 1 && i === 0) {
              text += unitMap[unit]; // 处理“十”的情况
            } else {
              text += numberMap[digit] + unitMap[unit];
            }
          } else {
            // 处理零的情况，避免出现“一十零一”这样的情况
            if (unit === 2 && numStr.length > 1 && numStr[i + 1] !== "0") {
              text += numberMap[digit];
            }
          }
        }

        return text;
      };
    },
  },
  data() {
    return {
      reportName: null,
      checkSubject: [], //选中的课程
      loading: false,
      // new
      sectionData: [], //节次
      // 课程内容
      courseForm: {
        subject_id: "", // 学科
        teacher_id: "", // 授课老师
        classroom_id: "", // 上课场地
        live_status: 0, // 直录播设置
        recorder_id: "", // 录播设备
      },
      dateOptions: [], // 周选项
      listData: [], // 单周课表
      termOptions: [], // 学期选项
      weeksOptions: [], //周选项
      searchParams: {
        termValue: "",
        weeksValue: "",
        classValue: "",
      }, // 查询参数
      tableHeaderData: mockData, //课表表头数据
      classOptions: [], //班级选项
    };
  },
  created() {
    // 获取课表
    this.init();
  },
  methods: {
    init() {
      this.getTermOption();
      //获取课时
      this.getTimeset();
      this.getClassOption();
    },
    // 色块
    coclorBG(data) {
      if (data.isCheck) {
        return "#348EFC";
      }
      if (!data.course_id) {
        return "#999999";
      }
      if (data.course_id) {
        return "#000";
      }
    },
    // 获取班级选项
    getClassOption() {
      const success = (res) => {
        const { status, data } = res;
        if (status === "success") {
          this.classOptions = data.map((item) => {
            return {
              value: item.id,
              label: item.rename,
              ...item,
            };
          });
          // 默认选中第一个
          this.searchParams.classValue = this.classOptions[0].value || "";
        }
      };
      const params = {
        user_id: this.$g.user_id,
      };
      this.$ajax.get("api/org/class_userid", { params, func: { success } });
    },

    // 选择器value变化
    handleChange(type) {
      switch (type) {
        case "term":
          if (this.searchParams.termValue) {
            this.getWeeksOption();
          } else {
            this.weeksOptions = [];
            this.searchParams.weeksValue = "";
          }
          break;
        case "weeks":
          break;
      }
      this.handleSearch(false);
    },
    // 获取学期选项
    getTermOption() {
      const success = (res) => {
        const { status, data } = res;
        if (status === "success") {
          this.termOptions = data.map((item) => {
            return {
              value: item.id,
              label: `${item.start_year}-${item.semester_name}`,
              ...item,
            };
          });

          // 默认选中第一个
          this.searchParams.termValue = this.termOptions[0].value || "";
          this.getWeeksOption();
        }
      };

      this.$ajax.get("api/term/term_list", { func: { success } });
    },
    // 获取周选项
    getWeeksOption() {
      const success = (res) => {
        const { status, data } = res;
        if (status === "success") {
          this.weeksOptions = data.map((item) => {
            const { week_name, week_num } = item;
            return {
              value: week_num,
              label: week_name,
              ...item,
            };
          });
          this.handleSearch(true);
        }
      };
      const params = {
        term_id: this.searchParams.termValue,
      };
      this.$ajax.get("api/term/getTermWeekTimeList", {
        params,
        func: { success },
      });
    },
    // 获取节次
    getTimeset() {
      const success = (res) => {
        const { status, data } = res;
        if (status == "success") {
          this.sectionData = data.map((item) => {
            return {
              ...item,
              value: item.section,
              label: item.section_name,
            };
          });
        }
      };
      this.$ajax.get("api/school/timeset", {
        params: {},
        func: { success: success },
      });
    },

    // 查询
    handleSearch(isInit) {
      this.getDateAndWeek(isInit);
    },

    // 获取周时间、以及学期 判断当前时间是否超过了学期结束时间 如果没有过则定位到当前周，如果已过则定位到第一周
    getDateAndWeek(isInit) {
      const termData =
        this.termOptions.find(
          (item) => item.id === this.searchParams.termValue
        ) || {};
      const params = {};
      if (isInit) {
        const termEnd = new Date(termData.end_time);
        const termStart = new Date(termData.start_time);
        const nowDate = new Date(this.handleDateFormat());

        // 当前学期是否开始
        if (termStart < nowDate) {
          // 已开始
          if (nowDate < termEnd) {
            // 在当前学期内
            params.select_time = "";
          } else {
            // 已结束 默认选中第一个
            this.searchParams.weeksValue = this.weeksOptions[0].value || "";
            const weeks = this.weeksOptions.find(
              (item) => item.week_num === this.searchParams.weeksValue
            );
            params.select_time = weeks.start_time;
          }
        } else {
          // 未开始 默认选中第一个
          this.searchParams.weeksValue = this.weeksOptions[0].value || "";
          const weeks = this.weeksOptions.find(
            (item) => item.week_num === this.searchParams.weeksValue
          );
          params.select_time = weeks.start_time;
        }
      } else {
        const { weeksValue } = this.searchParams;
        if (!weeksValue) return this.$message.error("请选择教学周");
        const weeks = this.weeksOptions.find(
          (item) => item.week_num === weeksValue
        );
        params.select_time = weeks.start_time;
      }

      const success = (res) => {
        const { status, data } = res;
        if (status === "success") {
          this.searchParams.weeksValue = data.week.week_num || "";

          const transData = this.tranWeeksData(data);
          // 表头日期
          this.tableHeaderData = transData;

          // 选项日期
          this.dateOptions = data.week_data
            .filter((item) => item.date_num)
            .map((item) => {
              return {
                value: Number(item.date_num),
                label: enumDateWeek[item.date_num],
              };
            });

          this.getList();
        }
      };
      this.$ajax.get("api/term/getNowTermWeekTime", {
        params,
        func: { success },
      });
    },
    // 获取当前日期时间
    handleDateFormat() {
      const date = new Date();
      // 获取年、月、日
      const year = date.getFullYear();
      let month = date.getMonth() + 1; // 月份是从0开始计数的，所以要加1
      let day = date.getDate();

      // 如果月份或日期是单个数字，则在前面补0
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;

      return year + "-" + month + "-" + day;
    },

    // 转换一下weeks数据 有时开始的周不一定是星期一开始 需要补够七天
    tranWeeksData(originData) {
      const week_data = [];
      for (let i = 1; i <= 7; i++) {
        const findWeek = originData.week_data.find(
          (item) => item.date_num == i
        );
        if (findWeek) {
          week_data.push(findWeek);
        } else {
          week_data.push({});
        }
      }
      originData.week_data = week_data;
      return originData;
    },
    getList() {
      const { weeksValue } = this.searchParams;
      if (!weeksValue) return this.$message.error("请选择教学周");

      const weeks = this.weeksOptions.find(
        (item) => item.week_num === weeksValue
      );
      const params = {
        class_id: this.searchParams.classValue,
        start_time: weeks.start_time,
        end_time: weeks.end_time,
        teacher_id: this.$g.user_id,
      };

      const success = (res) => {
        const { status, data } = res;
        if (status === "success") {
          this.listData = this.formatListData(data);
          this.loading = true;
        }
      };
      this.$ajax.get("api/school/syllabus", {
        params,
        func: { success },
      });
    },
    // 周一到周日的课程 单周课表
    generateSingleClassData() {
      const singleWeek = [];
      this.sectionData.forEach((item) => {
        const sigleData = {
          section: item.section,
          monday: "",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          ...item,
        };
        singleWeek.push(sigleData);
      });

      return singleWeek;
    },
    // 处理Listdata数据
    formatListData(listData) {
      const tableColum = this.generateSingleClassData();

      if (listData.length) {
        // 将对应的星期数据赋值给制定的字段
        const weekCourse = listData.reduce((acc, curr) => {
          const foundIndex = acc.findIndex(
            (item) => item.section === curr.section
          );
          if (foundIndex !== -1) {
            let containsCourseId = this.checkSubject.some(
              (item) => item.course_id === curr.course_id
            );
            const key = enmuDateText[curr.week];
            acc[foundIndex][key] = {
              ...curr,
              isCheck: containsCourseId ? true : false,
            };
            acc[foundIndex].sectionTime = {
              start_time: curr.start_time,
              end_time: curr.end_time,
            };
          }
          return acc;
        }, tableColum);

        return weekCourse;
      } else {
        return tableColum;
      }
    },
    //生成ai分析
    generateAI() {
      const pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/; // 只允许字母、数字和中文
      if (this.reportName) {
        if (!pattern.test(this.reportName)) {
          return this.$message.warning("教学报告名称只允许字母、数字和中文");
        }
        if (this.reportName.length > 15) {
          return this.$message.warning("报告名称不能超过15个字符");
        }
      } else {
        return this.$message.warning("请输入报告名称");
      }

      if (!this.checkSubject.length) {
        return this.$message.warning("请勾选课程");
      }
      if (this.checkSubject.length < 2) {
        return this.$message.warning("至少勾选二个课程");
      }
      console.log("this.checkSubject---", this.checkSubject);
      let checkArr = this.checkSubject.map(({ course_id }) => course_id);
      let dataPost = {
        teacher_id: this.$g.user_id,
        course_id: checkArr,
        start_time: null,
        end_time: null,
        report_name: this.reportName,
      };
      // 获取最早和最晚的时间
      if (this.checkSubject.length) {
        // 将字符串日期转换为 Date 对象
        const dateArr = this.checkSubject.map(
          (item) => new Date(item.start_time)
        );

        // 找到最早的日期
        const earliestDate = new Date(Math.min(...dateArr));
        const earliestFormatted = formatDate(earliestDate); // 转换为 "yyyy-mm-dd hh:mm:ss" 格式

        // 找到最晚的日期
        const latestDate = new Date(Math.max(...dateArr));
        const latestFormatted = formatDate(latestDate); // 转换为 "yyyy-mm-dd hh:mm:ss" 格式
        dataPost.start_time = earliestFormatted;
        dataPost.end_time = latestFormatted;
      }
      let success = (res) => {
        this.cancelAI();
        const idsString = checkArr.join(",");
        this.$emit("addReport", {
          ids: idsString,
          reportName: this.reportName,
        });
      };

      // 提交教学报告ai分析
      this.$ajax({
        url: "api/ainew/courseTeacherContrastList",
        method: "post",
        data: dataPost,
        func: { success: success },
      });
    },
    // 勾选课程
    selectSubject(row) {
      if (this.checkSubject.length >= 5 && row.isCheck === false) {
        return this.$message.error("最多勾选5个课程");
      }
      if (row.course_id) {
        row.isCheck = !row.isCheck;
        let courseIdToCheck = row.course_id;
        let containsCourseId = this.checkSubject.some(
          (item) => item.course_id === courseIdToCheck
        );
        if (!containsCourseId) {
          this.checkSubject.push(row);
        }
        if (!row.isCheck) {
          this.checkSubject = this.checkSubject.filter(
            (item) => item.course_id !== row.course_id
          );
        }
      }
    },
    // 取消生成ai报告分析
    cancelAI() {
      this.$emit("cancelAI");
      this.checkSubject = [];
      this.reportName = null;
    },
  },
};
</script>
<style lang="scss" scoped>
.classP_batle {
  /deep/.el-dialog__header {
    background-color: #338efc;
  }

  > table {
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #e0e0e0;

    thead {
      border-bottom: 1px solid #e0e0e0;

      th {
        border-right: 1px solid #e0e0e0;
        text-align: center;
      }
    }

    tbody {
      td {
        border: 1px solid #e0e0e0;
      }
    }
  }
}

.row_info {
  font-size: 12px;

  .title {
    font-size: 16px;
    line-height: 30px;
  }

  > p {
    line-height: 22px;
  }
}

.teachReport_search {
  display: flex;
  justify-content: flex-start;

  .teachReport_sr {
    width: 230px;
  }

  .srm {
    margin-left: 30px;
  }
}

.table_heard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.td {
  div {
    height: 20px;
  }
}

.table_heard div {
  display: flex;

  .color_box {
    width: 20px;
    height: 12px;
    margin: 1px 10px 0 15px;
  }
}

.classSchedule_batle {
  > table {
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #e0e0e0;

    thead {
      border-bottom: 1px solid #e0e0e0;

      th {
        width: 110px;
        border-right: 1px solid #e0e0e0;
        text-align: center;
      }
    }

    tbody {
      td {
        border: 1px solid #e0e0e0;

        > div {
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }
  }

  p {
    line-height: 25px;
  }

  tr {
    div {
      line-height: 30px;
    }
  }

  .cursorp {
    cursor: pointer;
  }

  .nonecursor {
    cursor: no-drop;
  }

  .bgheard {
    background: #f2f2f2;
    border: none;
  }

  .el-icon-plus {
    background: #e8f2ff;
    color: #e0e0e0;
    padding: 5px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
  }

  .timeSchedule {
    font-size: 12px;
  }
  /* new */
  .time_table {
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .el-table thead {
      color: #606266;
    }
    /deep/ .el-table th {
      background-color: #efefef !important;
    }
    td {
      width: 199px;
      height: 92px;
    }
  }
  .tag_check {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    position: absolute;
  }
  .tag_check2 {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    margin-left: 5px;
    position: absolute;
  }
  .video_table {
    margin-top: 10px;

    margin-left: 10px;
    margin-right: 10px;
    .class_section {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .class_course {
      display: flex;
      flex-direction: column;

      .section_header {
        display: flex;
        justify-content: end;

        span {
          cursor: pointer;
          margin: 0 2px;

          img {
            width: 16px;
            height: 16px;
          }
        }
      }

      .section_info {
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
        }
      }
    }

    .class_add {
      font-size: 30px;
      color: #a4b4c7;
      cursor: pointer;
    }

    .disable_add {
      cursor: not-allowed;
    }
  }
}
</style>